<template>
  <div>
    <basic-container>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>任务管理</el-breadcrumb-item>
        <el-breadcrumb-item>任务列表</el-breadcrumb-item>
      </el-breadcrumb>
    </basic-container>
    <basic-container>
      <avue-crud
        :table-loading="loading"
        ref="crud"
        :data="data"
        v-model="form"
        :option="option"
        :defaults.sync="defaults"
        :page.sync="page"
        @on-load="getList"
        @refresh-change="refreshChange"
        @search-reset="from = {}"
        @search-change="searchChange"
        @row-del="rowDel"
      >
        <template slot-scope="scope" slot="last_operation_info">
          <div class="authorId">
            {{ scope.row.edit_time }}
            <el-tag>{{ scope.row.edit_account_name }}</el-tag>
          </div>
        </template>
        <template slot="menuLeft">
          <el-button type="primary" size="small" icon="el-icon-plus" @click="addVisible = true">新 增</el-button>
        </template>
        <template slot-scope="scope" slot="menu">
          <el-button type="text" icon="el-icon-edit" @click="clickEdit(scope)">编辑</el-button>
        </template>
      </avue-crud>
    </basic-container>

    <el-dialog
      title="添加"
      :modal-append-to-body="false"
      :visible.sync="addVisible"
      width="60%">
      <el-form ref="form" :model="form" label-width="90px">
        <el-form-item label="任务类型：">
          <el-select v-model="item.task_type" style="width: 100%" @change="getTaskList">
            <el-option label="日常任务" :value="0"></el-option>
            <el-option label="新用户任务" :value="1"></el-option>
            <el-option label="阅读任务" :value="2"></el-option>
          </el-select>
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <el-checkbox-group v-model="checkedData" @change="handlecheckedDataChange">
            <el-checkbox v-for="item in taskLibraryList" :label="item" :key="item.id">{{ item.task_name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="任务版本：">
          <el-input v-model="item.version" placeholder="请输入任务版本"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog('addVisible')">取 消</el-button>
        <el-button type="primary" @click="submitAdd">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="编辑"
      :modal-append-to-body="false"
      :visible.sync="editVisible"
      width="60%">
      <el-form ref="form" :model="form" label-width="90px">
        <el-form-item label="任务类型：">
          <el-select v-model="item.task_type" style="width: 100%" @change="getTaskList">
            <el-option label="日常任务" :value="0"></el-option>
            <el-option label="新用户任务" :value="1"></el-option>
            <el-option label="阅读任务" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务名称：">
          <el-select v-model="item.task_library_id" style="width: 100%">
            <el-option :label="item.task_name" :value="item.id" v-for="item in taskLibraryList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务版本：">
          <el-input v-model="item.version" placeholder="请输入任务版本"></el-input>
        </el-form-item>
        <el-form-item label="排序：">
          <el-input v-model="item.sort" placeholder="请输入排序序号"></el-input>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="item.status" style="width: 100%">
            <el-option label="上线" :value="0"></el-option>
            <el-option label="下线" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog('editVisible')">取 消</el-button>
        <el-button type="primary" @click="submitEdit">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
import { common } from "@/api/cat/httpRequest";
import { catUrl } from "@/config/env";
import { selectVersion } from "@/api/cat/baseUrls";
import { appTaskList as baseURL } from "@/api/cat/baseUrls";
import { appTaskLibrary as TaskLibrary } from "@/api/cat/baseUrls";

export default {
  data() {
    return {
      addVisible: false,
      editVisible: false,

      taskLibraryList: [],
      dataOptions: [],
      checkAll: false,
      checkedData: [],
      isIndeterminate: true,

      item: {
        id: '',
        task_type: 0,
        task_list: [],
        version: '',
        task_library_id: '',
        status: 0,
        sort: ''
      },

      radio: "1",
      resData: "",
      userInfo: this.$store.state.user.userInfo,
      defaults: {},
      loading: false,
      page: {
        total: 0,
        pageSize: 10,
      },
      type: true,
      data: [],
      params: {},
      form: {},
      default: {
        orderByList: "edit_time&DESC",
      },
      option: {
        addBtn: false,
        editBtn: false,
        index: false,
        indexLabel: "序号",
        border: true,
        column: [
          {
            label: "任务ID",
            prop: "id",
            type: "input",
            addDisplay: false,
            editDisplay: false,
          },
          {
            label: "任务类型",
            prop: "task_type",
            type: "select",
            span: 24,
            row: true,
            search: true,
            dicData: [
              {
                label: "Daily Tasks",
                value: 0,
              },
              {
                label: "Tasks For Newcomers",
                value: 1,
              },
              {
                label: "Today's Reading Challenge",
                value: 2,
              },
            ],
            rules: [
              {
                required: true,
                message: "任务类型必须选择",
              },
            ],
          },
          {
            label: "任务名称",
            prop: "task_name",
            type: "input",
            span: 24,
            rules: [
              {
                required: true,
                message: "任务名称必须填写",
              },
            ],
          },
          {
            label: "版本",
            prop: "version",
            type: "input",
            span: 24,
            search: true,
            rules: [
              {
                required: true,
                message: "版本必须填写",
              },
            ],
          },
          {
            label: "排序",
            prop: "sort",
            type: "input",
            span: 24,
            row: true,
            rules: [
              {
                required: true,
                message: "排序必须填写",
              },
            ],
          },
          {
            label: "状态",
            prop: "status",
            type: "select",
            span: 24,
            row: true,
            dicData: [
              {
                label: "上线",
                value: 0,
              },
              {
                label: "下线",
                value: 1,
              }
            ],
            rules: [
              {
                required: true,
                message: "状态必须选择",
              },
            ],
          },
          {
            label: "最后操作信息",
            prop: "last_operation_info",
            type: "input",
            slot: true,
            addDisplay: false,
            editDisplay: false,
            addDisabled: true,
            editDisabled: true,
          },
        ],
      },
    };
  },
  methods: {

    handleCheckAllChange(val) {
      this.checkedData = val ? this.taskLibraryList : [];
      this.isIndeterminate = false;
    },
    handlecheckedDataChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.taskLibraryList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.taskLibraryList.length;
    },

    closeDialog(type) {
      this[type] = false
      this.item = {
        id: '',
        task_type: 0,
        task_list: [],
        version: '',
        task_library_id: '',
        status: 0,
        sort: ''
      }
    },

    /**编辑弹窗 */
    clickEdit(scope) {
      this.item.id = scope.row.id
      this.item.sort = scope.row.sort
      this.item.status = scope.row.status
      this.item.task_type = scope.row.task_type
      this.item.version = scope.row.version
      this.item.task_library_id = scope.row.task_library_id
      this.editVisible = true
    },

    /**获取任务类型对应的列表 */
    async getTaskList() {
      let res = await common(
        TaskLibrary.page,
        {
          task_type: this.item.task_type
        },
        {
          currentPage: 1,
          pageSize: 1000
        },
        "POST"
      );
      this.taskLibraryList = res.data
      this.item.task_library_id = ''
    },

    /**获取列表 */
    async getList() {
      this.loading = true;
      //清空表格列表
      this.data = [];
      //发送请求获取数据
      let response = await common(
        baseURL.page,
        { ...this.default, ...this.params },
        this.page,
        "POST"
      );
      this.data = response.data;
      this.loading = false;
      this.getTaskList()
      this.item = {
        id: '',
        task_type: 0,
        task_list: [],
        version: '',
        task_library_id: '',
        status: 0,
        sort: ''
      }
    },
    /**添加 */
    async submitAdd() {
      if(this.checkedData.length == 0) {
        this.$message.warning('请选中任务类型')
        return
      }
      if(this.item.version == '') {
        this.$message.warning('请输入任务版本')
        return
      }
      let row = {}
      let userInfo = this.$store.state.user.userInfo;
      row.edit_account_id = userInfo.id;
      row.edit_account_name = userInfo.username;
      row.task_type = this.item.task_type;
      row.version = this.item.version;
      let task_list = [];
      this.checkedData.forEach(item => {
        task_list.push(item.id)
      });
      row.task_list = task_list;
      console.log(row);
      let data = await common(baseURL.add, row, null, "POST");
      this.addVisible = false;
      this.getList();
    },
    /**修改 */
    async submitEdit() {
      let row = {}
      let userInfo = this.$store.state.user.userInfo;
      row.edit_account_id = userInfo.id;
      row.edit_account_name = userInfo.username;
      row.id = this.item.id;
      row.version = this.item.version;
      row.sort = this.item.sort;
      row.status = this.item.status;
      let res = await common(baseURL.update, row, null, "PUT");
      this.editVisible = false;
      this.getList();
    },
    /**刷新 */
    refreshChange() {
      this.getList();
    },
    /**删除 */
    rowDel(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        type: "warning",
      })
        .then(async () => {
          let userInfo = this.$store.state.user.userInfo;
          let response = await common(
            `${baseURL.del}?id=${row.id}&userId=${userInfo.id}&userName=${userInfo.username}`,
            {},
            null,
            "DELETE"
          );
        })
        .then(() => {
          this.getList();
        });
    },
    /**刷新 */
    refreshChange() {
      this.getList();
    },
    /**搜索 */
    searchChange(params, done) {
      params.push_time = `${params.push_time ? "!<>!" + params.push_time : ""}`;
      // params.edit_account =  '%'+params.edit_account+'%' //模糊搜索
      delete params.push_time;
      this.params = params;
      this.page.currentPage = 1;
      this.getList();
      if (done) done();
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>

</style>